<template>
	<view class="box">
		<view class="index-bg">
			<image :src="BASE_URL+'/uploads/20250801/2ec50fa1c5a0f6b3c224709d3ae527c2.png' " mode="widthFix"></image>
		</view>
		<view class="z-1">
			<u-navbar :titleStyle='{"color":"#000"}' leftIconColor='#000' title="陪诊服务" bgColor="transparent"
				@rightClick="rightClick" :autoBack="true" :fixed="false"> </u-navbar>
			<view :style="{'height':navBarHeight+ 'px'}"></view>
			<view class="info-box padding-l-r-30">
				<view class="avatar-box flex-box z-1">
					<view class="img-box">
						<image :src="BASE_URL+info.avatar" mode="aspectFill"></image>
					</view>

					<text class="color-333 fs-30 fw-b"> {{info.name}}</text>
				</view>
                <view class="z-1" style="height: 120rpx;"></view>
				<view class="info-content z-0 padding-l-r-25 fs-26">
					<view class="info-item color-333">从业{{info.work_year}}年 | {{info.follow_num}}人感兴趣</view>
					<view class="info-item color-4d align-items-center">
                        <u-icon name="map" color="#4d4d4d" size="14"></u-icon>
                       <text> {{info.address}}  | {{info.range}}km</text>
                    </view>
                    <view class="line"></view>
                    <view class="info-introduce fs-26 color-333">
                        {{info.about}}
                    </view>
				</view>
			</view>

		</view>
        <view class="title fs-30 color-333 fw-b z-1 padding-l-r-30">
            服务信息
        </view>
        <view class="z-1 padding-l-r-30">
            <view class="bg-white padding-l-r-25">
                <view v-for="(item ,index) in list">
                    <view class="line" v-show="index"></view>
                    <view class="align-items-center list">
                        <view class="img-box">
                            <image :src=" item.image" mode="aspectFill"></image>
                        </view>
                        <view class="flex-1 flex-column justifyContent-spaceBetween">
                            <view class="fs-30 fw-b color-333">{{item.title}}</view>
                            <view class="fs-26 color-6">{{item.content}}</view>
                            <view class="justifyContent-spaceBetween price-box">
                                <view class="fs-24 color-4d ">
                                    <text class="fs-24">￥</text>
                                    <text class="fs-34 fw-b">{{item.price}}</text>
                                    起/次
                                </view>
                                <view class="btn color-white fs-26" @click="reservation(item)">
                                    立即预约
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

	</view>
</template>

<script> 
	import {nurseDetail,serviceList} from '@/api/homeCare.js'
	import $baseUrl from "@/config/index.js"
	const BASE_URL = $baseUrl.baseUrl  
	export default {
		data() {
			return {
				BASE_URL,
				navBarHeight: '',
				info: { },
                list:[  ],
				id:'',
				page:1
			}
		},
		onLoad(e) {
			console.log(e);
			this.id = e.id
		},
		onShow() {
			// this.getBarHeight()
			this.getNurseDetail()
			this.getServiceList()
		},
		methods: {
			getBarHeight() {
				const systemInfo = uni.getSystemInfoSync();
				// 获取状态栏高度
				const statusBarHeight = systemInfo.statusBarHeight;

				// 微信小程序默认导航栏高度（单位为 px）
				const defaultNavBarHeight = 44;

				// 总体头部导航栏高度（包含状态栏）
				this.navBarHeight = statusBarHeight + defaultNavBarHeight;

			},
			getNurseDetail(){
				nurseDetail({nurse_id:this.id}).then(res=>{
					if(res.code == 1){
						this.info =res.data
					}else {
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				})
			},
			rightClick() {
				uni.navigateBack()
			},
			reservation(item){

                uni.setStorageSync('cityName', '')
			   uni.navigateTo({
			   	url:'/pageA/homeCare/reservation?id='+item.id
			   })
			},
			getServiceList(){
				let params = {
					page:this.page,
					limit:10,
					type:1
				}
				serviceList(params).then(res=>{
					if(res.code == 1){
						this.list =res.data
					}else {
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.box {
    background: #F7F7F7;
}
	.info-box {
		position: relative;
		.avatar-box {
			position: absolute;
			left: 60rpx;
			padding-top: 40rpx;
			align-items: flex-end;

			.img-box {
				width: 150rpx;
				height: 150rpx;
				margin-right: 20rpx;
				border-radius: 50%;
				overflow: hidden; 
			}

			image {
				width: 100%;
				height: 100%;
			}

			text {
				margin-bottom: 20rpx;
			}
		}

		.info-content {
            padding-top: 108rpx;
			background: #fff;
			border-radius: 14rpx;
            .info-item {
                margin-bottom: 14rpx;
            }
		}
        .info-introduce {
            padding-top: 24rpx;
            padding-bottom: 26rpx;
        }
	}
    .title {
        line-height: 92rpx;
    }
    .list {
        padding: 30rpx 0;
        .img-box {
            width: 140rpx;
            height: 140rpx;
            min-width: 140rpx;
            margin-right: 20rpx; 
            border-radius: 8rpx; 
            overflow: hidden;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .price-box {
            align-items: flex-end;
            text {
                color: #FF0A13;
            }
        }
        .btn{
            width: 150rpx;
            height: 56rpx;
            background: #43ABC4;
            border-radius: 28rpx;
            text-align: center;
            line-height: 56rpx;
        }
    }
</style>
